<template>
	<view class="record-container">
		<view class="search">
			<!-- <view class="s-type">
				<dean-popover direction="right" modalLeftPos="6rpx" @select="selectType" :btnList="typeList" chooseText="优先级" isShowIcon></dean-popover>
			</view> -->
			<my-popover direction="right" modalLeftPos="6rpx" @select="selectType" :btnList="typeList" chooseText="设施类型" ></my-popover>
			<view class="s-arrow"></view>
			<view class="search-box">
				<view class="icon">
					<image src="../../static/search.png"></image>
				</view>
				<input @confirm="searchInstall" v-model="searchText" type="text" class="search-input" confirm-type="search"
				 placeholder="请输入设施具体位置">
			</view>
			<text class="add" @click="goAddInstall">
				+
			</text>
			<text @click="goAddInstall" style="color: #5094FF;">新增</text>
		</view>
		<!-- <search-box :isShowAdd="isShow" @reset="resetInstall" @search="searchInstall" @add="goAddInstall"></search-box> -->
		<!-- 全部 -->
		<facility-list :isShowDelete="isShow" v-if="installList" @edit="goEdit" @delete="onDelete" :installList="installList" @add="goAddInstall"></facility-list>
		<view v-else>
			<van-empty description="暂无设施" />
		</view>
		<uni-load-more v-if="installList && installList.length >= 10" :status="status" />
	</view>
</template>

<script>
	import MyPopover from '../myComponents/my-popover/dean-popover.vue'
	import SearchBox from '../components/searchBox.vue'
	import DeanPopover from '../components/dean-popover/dean-popover.vue'
	import FacilityList from '../components/facilityList.vue'
	import { showModal } from '@/utils/common'
	export default {
		components: {
			FacilityList,
			SearchBox,
			MyPopover
		},
		data() {
			return {
				searchText: '',
				typeList: ['全部','消防栓','灭火器','烟雾探测器','温度探测器', '煤气罐'],
				valueList:['', 'hydrant','annihilator','smokeDetector','temperatureDetector','gasTank'],
				isShow: true,
				checkPointName: '',
				installList: [],
				status: 'more',
				params: {
					所属网格id: null,
					检查点id: null,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				}
				// btnList: ['全部','装修申请','装修验收','故障报修','上门回收','消防安全','保洁清理','设备安装']
			}
		},
		onLoad(options) {
			if(options.hidden) {
				this.isShow = false
			}
			this.checkPointName = options.name
			this.params.所属网格id = uni.getStorageSync('gridInfo').所属网格id
			// this.params.检查点id = +options.id
			// this.params.分区id = +options.partitionId
			// this.params.楼栋号id = +options.buildId
			// this.params.单元号id = +options.unitId
		},
		onShow() {
			this.getInstallList()
		},
		onReachBottom() {
			console.log('触发上拉')
			if(this.status !== 'noMore' && this.installList) {
				this.status = 'loading'
				this.getMoreInstallList()
			}
		},
		watch: {
			searchText() {
				if(this.searchText == '') {
					this.params.具体位置 = null
					this.getInstallList()
				}
			}
		},
		methods: {
			selectType(val) {
				uni.showLoading()
				this.params.设施类型 = this.valueList[val]
				this.getInstallList()
			},
			resetInstall() {
				this.params.具体位置 = null
				this.getInstallList()
			},
			searchInstall() {
				this.params.具体位置 = this.searchText
				this.getInstallList()
			},
			goAddInstall() {
				uni.navigateTo({
					url: '../addInstallation/addInstallation'
				})
			},
			goEdit(id) {
				uni.navigateTo({
					url: '../installtionDetail/installtionDetail?id=' + id
				})
			},
			onDelete(id) {
				this.$common.showModal('确定要删除该设施吗', this.deleteInstall, [id])
			},
			deleteInstall(id) {
				this.$http.post('gridSystem/device/delete', {
					id
				}).then(res => {
					if (res.code === 10000) {
						uni.showToast({
							title: '删除成功'
						})
						this.getInstallList()
					}
				})
			},
			// 获取设施列表
			getInstallList() {
				this.params.pagination.current = 1
				this.$http.post('gridSystem/device/listWithoutAuth', this.params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.installList = res.data.list
						if(this.installList && this.installList.length === res.data.total){
							this.status = 'noMore'
						}
					}
				})
			},
			getMoreInstallList() {
				this.params.pagination.current++
				this.$http.post('gridSystem/device/listWithoutAuth', this.params).then(res => {
					console.log(res)
					if(res.code === 10000){
						if(res.data.list !== null) {
							this.installList = this.installList.concat(res.data.list)
						}
						if(this.installList.length === res.data.total){
							this.status = 'noMore'
						}
					}
				})
			},
			handleCancel() {
				console.log('阻止冒泡')
			},
			setTabIndex(val) {
				this.tabCurrentIndex = val
			}
		}
	}
</script>

<style lang="scss">
	.van-empty {
		background-color: #fff;
	}
	.record-container {
		// padding-top: 68rpx;
		background-color: #f5f5f5;
		// padding-bottom: 20rpx;
		// .search {
		// 	// margin-left: 100rpx;
		// 	width: 750rpx;
		// 	height: 96rpx;
		// 	background-color: #fff;
		// 	display: flex;
		// 	align-items: center;
		// 	padding-left: 50rpx;
		// 	margin-bottom: 20rpx;
		// 	.search-box {
		// 		width: 400rpx;
		// 		height: 56rpx;
		// 		padding-left: 17rpx;
		// 		padding-right: 20rpx;
		// 		margin-right: 20rpx;
		// 		// background-color: pink;
		// 		border: 2rpx solid #595959;
		// 		border-radius: 28rpx;
		// 		display: flex;
		// 		.icon {
		// 			width: 50rpx;
		// 			height: 46rpx;
		// 			margin-top: 3rpx;
		// 			image {
		// 				width: 100%;
		// 				height: 100%;
		// 			}
		// 		}
		// 		.search-input {
		// 			flex: 1;
		// 			height: 100%;
		// 			color: #999;
		// 		}
		// 		.pop {
		// 			position: absolute;
		// 			right: 60rpx;
		// 		}
		// 	}
		// 	.add {
		// 		font-size: 32rpx;
		// 		font-weight: bold;
		// 		color: #5094FF;
		// 		margin-right: 4rpx;
		// 	}
		// }
		.search {
			// margin-left: 100rpx;
			width: 750rpx;
			height: 96rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			margin-bottom: 20rpx;
			.s-arrow {
				width: 16rpx;
				height: 16rpx;
				border-top: 2rpx solid #3699FF;
				border-right: 2rpx solid #3699FF;
				transform: rotate(135deg);
				margin-left: 10rpx;
				margin-top: -4rpx;
			}
			.search-box {
				width: 400rpx;
				height: 56rpx;
				margin: 0 30rpx;
				padding-left: 17rpx;
				padding-right: 20rpx;
				// background-color: pink;
				border: 2rpx solid #595959;
				border-radius: 28rpx;
				display: flex;
				.icon {
					width: 50rpx;
					height: 46rpx;
					margin-top: 3rpx;
		
					image {
						width: 100%;
						height: 100%;
					}
				}
				.search-input {
					flex: 1;
					height: 100%;
					color: #999;
				}
				.pop {
					position: absolute;
					right: 60rpx;
				}
			}
			.add {
					font-size: 32rpx;
					font-weight: bold;
					color: #5094FF;
					margin-right: 4rpx;
				}
		}
	}
</style>
